<%@ include file="/include/taglibs.jsp"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="${ctx}/css/reg.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function refreshCaptcha(){
	document.getElementById('captcha').src='${ctx }/servlets/CaptchaServlet?'+Math.random()+Math.random();
	}

function showTip(id,msg){
	$("#"+id+"_tip").removeClass("error");
	$("#"+id+"_tip").addClass("ok");
	$("#"+id+"_tip").html("<div class='msg'>"+msg+"</div>");
}
function showError(id,msg){
	$("#"+id+"_tip").removeClass("ok");
	$("#"+id+"_tip").addClass("error");
	$("#"+id+"_tip").html("<div class='msg'>"+msg+"</div>");
}
function onkeyDownEvent(evt){
	 var evt=evt?evt:(window.event?window.event:null);//兼容IE和FF
	if(evt.keyCode ==13){
		doReg();
	}
}
//验证邮箱
function onblurEmail(){
	 var email=$("#email").val();
	 if(email!=null && email!=''){
	   var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
	   if(!myreg.test(email)){//验证邮箱格式是否正确
		   showError("email","请填写有效的邮箱");
	       return false;
	   }else{//验证邮箱是否在系统内存在
		   var url="${ctx}/user/systemUserAction!ajaxCheckEmail.action";
		   $.ajax({
				type: "post",
				url: url,
				dataType: "text",
				data:{"email":email,"timeTemp":new Date().getTime()},   
				success: function(data){
					  if(data=='02'){
						  showError("email","该邮箱已经被使用");
						  return false;
					  }else{
						  return true;
					  }
					}
				});
	   }

	 }else{
		 showError("email","请填写您的常用邮箱,方面我们与您及时联系");
		 return false;
	 }
     
}
//验证用户名
function onblurUserName(){
	 var username=$("#username").val();
	 if(username!=null && username!=''){
	   if(!username.match( /^[\u4E00-\u9FA5a-zA-Z0-9_]{5,50}$/)){//验证邮箱格式是否正确
		   showError("username","请填写有效的会员名称");
		   return false;
	   }else{//验证邮箱是否在系统内存在
		   var url="${ctx}/user/systemUserAction!ajaxCheckUserName.action";
		   $.ajax({
				type: "post",
				url: url,
				dataType: "text",
				data:{"userName":username,"timeTemp":new Date().getTime()},   
				success: function(data){
					  if(data=='02'){
						  showError("username","该会员名称已经被使用");
						  return false;
					  }else{
						  return true;
					  }
					}
				});
	   }

	 }else{
		 showError("username","会员名称不能为空");
		 return false;
	 }
}
//验证密码
function onblurPassword(){
	 var password=$("#password").val();
	 if(password!=null && password!=''){
          if(password.length<6||password.length>20){
        	  showError("password","登录密码为6-20位");
        	  return false;
          }else{
        	  return true;
          }
	 }else{
		 showError("password","请填写登录密码");
		 return false;
	 }
}
//验证密码
function onblurRePassword(){
	 var re_password=$("#re_password").val();
	 var password=$("#password").val();
	 if(re_password!=null && re_password!=''){
          if(re_password!=password){
        	  showError("re_password","您两次输入的密码不一致,请重新输入");
        	  return false;
          }else{
        	  return true;
          }
	 }else{
		 showError("re_password","请再次输入您的确认密码");
		 return false;
	 }
}
//验证验证码
function onblurRegCode(){
	 var regCode=$("#regCode").val();
	 if(regCode!=null && regCode!=''){
	  //验证邮箱是否在系统内存在
		   var url="${ctx }/checkCaptchaServlet?captcha="+regCode;
		   $.ajax({
				type: "post",
				url: url,
				dataType: "text",
				success: function(data){
					if(data.indexOf("true")==-1){
				   		  showError("regCode","验证码输入不正确,请您重新输入");
				   		  refreshCaptcha();
				   		  return false;
					}else{
						return true;
					}
				},
				complete : function(XMLHttpRequest, textStatus) {
				}
			});
	 }else{
		 showError("regCode","验证码不能为空");
		 return false;
	 }
}
//执行注册
function doReg(){
	//验证邮箱
	var email=$("#email").val();
	 if(email!=null && email!=''){
	   var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
	   if(!myreg.test(email)){//验证邮箱格式是否正确
		   showError("email","请填写有效的邮箱");
	   }else{//验证邮箱是否在系统内存在
		   var url="${ctx}/user/systemUserAction!ajaxCheckEmail.action";
		   $.ajax({
				type: "post",
				url: url,
				dataType: "text",
				data:{"email":email,"timeTemp":new Date().getTime()},   
				success: function(data){
					  if(data=='02'){
						  showError("email","该邮箱已经被使用");
					  }else{
						  //验证用户名
						  var username=$("#username").val();
							 if(username!=null && username!=''){
							   if(!username.match( /^[\u4E00-\u9FA5a-zA-Z0-9_]{5,50}$/)){//验证邮箱格式是否正确
								   showError("username","请填写有效的会员名称");
							   }else{//验证邮箱是否在系统内存在
								   var url="${ctx}/user/systemUserAction!ajaxCheckUserName.action";
								   $.ajax({
										type: "post",
										url: url,
										dataType: "text",
										data:{"userName":username,"timeTemp":new Date().getTime()},   
										success: function(data){
											  if(data=='02'){
												  showError("username","该会员名称已经被使用");
											  }else{
												  //验证密码
												  var password=$("#password").val();
													 if(password!=null && password!=''){
												          if(password.length<6||password.length>20){
												        	  showError("password","登录密码为6-20位");
												          }else{
												        	  //验证二次密码
												        	  var re_password=$("#re_password").val();
												        		 var password=$("#password").val();
												        		 if(re_password!=null && re_password!=''){
												        	          if(re_password!=password){
												        	        	  showError("re_password","您两次输入的密码不一致,请重新输入");
												        	          }else{
												        	        	  //验证码
												        	        	  var regCode=$("#regCode").val();
												        	        		 if(regCode!=null && regCode!=''){
												        	        		  //验证邮箱是否在系统内存在
												        	        			   var url="${ctx }/checkCaptchaServlet?captcha="+regCode;
												        	        			   $.ajax({
												        	        					type: "post",
												        	        					url: url,
												        	        					dataType: "text",
												        	        					success: function(data){
												        	        						if(data.indexOf("true")==-1){
												        	        					   		  showError("regCode","验证码输入不正确,请您重新输入");
												        	        					   		  refreshCaptcha();
												        	        						}else{
												        	        							$("#addForm").submit();
												        	        						}
												        	        					},
												        	        					complete : function(XMLHttpRequest, textStatus) {
												        	        					}
												        	        				});
												        	        		 }else{
												        	        			 showError("regCode","验证码不能为空");
												        	        		 }
												        	          }
												        		 }else{
												        			 showError("re_password","请再次输入您的确认密码");
												        		 }
												          }
													 }else{
														 showError("username","请填写登录密码");
													 }
											  }
											}
										});
							   }

							 }else{
								 showError("username","会员名称不能为空");
							 }
					  }
					}
				});
	   }

	 }else{
		 showError("email","请填写您的常用邮箱,方面我们与您及时联系");
	 }
}

</script>
<title>用户注册</title>
</head>
<body>
<%@include file="/include/head.jsp"%>
	 <!--页面中部内容-开始-->
	 <div class="common_wraper">
	 	<div class="winTopOuter">
	 		<div class="winTopInner"></div>
	 	</div>
	 	<div class="winContent">
	 		<div class="winTitle">
	 			请填写用户注册信息
	 		</div>
	 		<div>
	 	    <form id="addForm" action="${ctx}/user/systemUserAction!doReg.action" method="post" onKeyPress="javascript:onkeyDownEvent(event);">
	 			<table class='regTable'>
	 				<tr>
	 					<td class='regTdTitle'><span class='red'>*</span>Email地址：</td><td width='300px;'><input type="text" class='regInput' id='email' name='systemUser.email' onfocus="showTip('email','请填写您的常用邮箱,以方便获得订单通知')" onblur="onblurEmail()"></input></td><td><div  id='email_tip'></div></td>
	 				</tr>
	 				<tr>
	 					<td class='regTdTitle'><span class='red'>*</span>用户昵称：</td><td><input type="text" class='regInput' id='username' name='systemUser.username' onfocus="showTip('username','会员名称应为长度5-50位,只能由a-z,A-Z,0-9,下划线和中文汉子组成')" onblur="onblurUserName()"></input></td><td><div  id='username_tip'></div></td>
	 				</tr>
	 				<tr>
	 					<td class='regTdTitle'><span class='red'>*</span>密&nbsp;&nbsp;码：</td><td><input type="password" class='regInput' id='password' name='systemUser.password' onfocus="showTip('password','密码长度为6-20位,字母,数字或符号,区分大笑写')" onblur="onblurPassword()"></input></td><td><div  id='password_tip'></div></td>
	 				</tr>
	 				<tr>
	 					<td class='regTdTitle'><span class='red'>*</span>确认密码：</td><td><input type="password" class='regInput' id='re_password' name='re_password' onfocus="showTip('re_password','请再次输入您的密码')" onblur="onblurRePassword()"></input></td><td><div  id='re_password_tip'></div></td>
	 				</tr>
	 				<tr>
	 					<td class='regTdTitle'><span class='red'>*</span>注册码：</td><td valign="middle"><input maxlength="5" type="text" class='regInput' style='width:120px;' id='regCode' name='regCode' onfocus="showTip('regCode','请输入验证码')" onblur="onblurRegCode()"></input>
		 					<span class='regCode'>
		 						 &nbsp;<img src="${ctx}/servlets/CaptchaServlet?'+Math.random()+Math.random()" style="cursor: pointer;" id="captcha" onclick="refreshCaptcha()"/>
		 						<a href='#' onclick='refreshCaptcha();'>看不清？</a>
		 					</span>
	 					</td><td><div  id='regCode_tip'></div></td>
	 				</tr>
	 				<tr>
	 				<td class='regTdTitle'></td>
	 					<td><div class='regButton' id='regButton' onclick="doReg()" style="cursor: pointer;"  >同意以下协意并且注册</div></td>
	 					<td><div  id='agreeBox_tip'></div>
	 				</tr>
	 			</table>
	 			</form>
	 			<div style='margin-left:200px;'>
		 			<iframe class="textArea" src="${ctx}/user/systemUserAction!gotoItems.action" frameBorder="0"></iframe>
		 		</div>
	 		</div>
	 	</div>
	 	<div class="winBottomOuter">
	 		<div class="winBottomInner"></div>
	 	</div>
	 </div>
	 <!--页面中部内容-结束-->
	<%@include file="/include/footer.jsp" %>
</body>
</html>